import { Button, DotLoading, Toast } from "antd-mobile";
import { isValidArr, navigateTo } from "@/utils";
import ItemComp from "./item";
import React, { useEffect, useState } from "react";
import requewt from "@/utils/requewt";
import { API } from "@/config";
import callFeedback from "@/components/common/modalFeedback";

export default function () {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(undefined);

  useEffect(() => {
    (async () => {
      await compHandler.fetch()
    })()
  }, [])

  const compHandler = {
    // 获取活动状态
    fetch: async () => {
      setLoading(true);

      const resp = await requewt(API.prize.mine);
      console.log(`resp`, resp)
      await setLoading(false)
      if (resp?.error_code !== 0) {
        await Toast.clear();
        await callFeedback({title: resp?.msg || `请求失败`});
        return;
      }
      setData(resp?.data);
    },
  }

  return (
    <div className={`cp-prize`}>
      <div className="content">

        <div className="prizes">
        <div className={`cp-prize-item cp-prize-header`}>
      {/*<div className="date">{item?.created_date}</div>*/}
      {/*<div className="type">{item?.category}</div>*/}
      <div className="value">奖品名称</div>
      <div className="thumb">
      发放时间
      </div>
    </div>
          {
            loading ?
              <div className="p-3"><DotLoading /></div>
              :
              isValidArr(data) ?
                data.map((item, index) => {
                  return (
                    <ItemComp item={item} key={index} />
                  )
                })
                :
                <div className="p-3">暂无</div>
          }

        </div>

      </div>
      <div className="footer">


      </div>
    </div>
  )
}